<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>exp2-3</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background: white;
        font-size: 14px;
    }

    #main {
        margin: 20px auto;
        width: 600px;
        border: 1px solid;
    }

    .row {
        line-height: 50px;
    }

    .minirow {
        line-height: 20px;
        color: #CCC;
    }

    span.right {
        text-align: right;
        width: 150px;
        line-height: 30px;
        display: inline-block;
    }

    .txt {
        line-height: 30px;
        width: 180px;
        height: 30px;
        vertical-align: middle;
        border: 1px solid #CCCCCC;
        margin-right: 10px;
        padding-left: 5px;
        border-radius: 3px;
        box-shadow: 2px 2px 2px 0 #EAEAEA inset;
    }
    /* 输入文本框在获得焦点时，显示粉红色背景 */
    .txt:hover {
        background-color: pink;
    }

    #main span i {
        color: red;
        font-style: normal
    }

    .little {
        display: inline-block;
        padding: 4px 15px 4px 10px;
        line-height: 20px;
        border: 1px #999999 solid;
        margin-right: 20px
    }

    select {
        width: 80px;
    }

    #validate {
        width: 50px;
    }

    .alert {
        width: 150px;
        line-height: 20px;
        vertical-align: middle;
        position: relative;
        top: 5px;
        font-size: 10px;
        background: #FFFECC;
        font-family: Arial simhei;
        border: 1px #aaa solid;
        display: inline-block;
    }


    .btnC {
        background-image: url(new_btn.png);
        background-position: -410px -0px;
        width: 153px;
        height: 52px;
        border: 0 none;
        cursor: pointer;
        margin-top: 10px;
    }

    .btnC:hover {
        background-position: -565px -0px;
    }
    </style>
</head>

<body>
    <div id="main">
        <form action="" method="GET">
            <div class="row">
                <label for="phone"><span class="right"><i>*</i> 我的手机号码：</span></label>
                <input class="txt" type="text" id="phone" name="phone" autofocus="autofocus" placeholder="输入手机" pattern="^1[3-9]\d{9}" required="required" oninvalid="setCustomValidity('请输入1开头的11位手机号')">
                <input type="button" value="免费获取验证码">
            </div>
            <div class="minirow">
                <span class="right">&nbsp;</span>
                <span>完成注册后，手机号码为你的微博登录号</span>
            </div>
            <div class="row">
                <label for="password"><span class="right"><i>*</i> 创建密码：</span></label>
                <input class="txt" type="password" id="password" name="password">
                <span class="alert">为了你的账户安全, 请使用与其他网络不同的密码。</span>
            </div>
            <div class="row">
                <label for="nickname"><span class="right"><i>*</i> 昵称：</span></label>
                <input class="txt" type="text" id="nickname" name="nickname" required="required" placeholder="输入昵称">
            </div>
            <div class="row">
                <span class="right"><i>*</i> 性别：</span>
                <!-- 单选按钮组的 name 必须相同 -->
                <input type="radio" name="sex" id="mail" value="男" checked="checked">
                <label for="mail">男</label> &nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="sex" id="femail" value="女"><label for="femail">女</label>
            </div>
            <div class="row">
                <span class="right"><i>*</i> 所在地：</span>
                <div class="little">
                	<!-- 下拉列表，不需要联动 -->
                    <select name="cities" id="cities">
                        <option>北京市</option>
                        <option>上海市</option>
                        <option>广州市</option>
                        <option>深圳市</option>
                    </select>
                </div>
                <div class="little">
                    <select name="region" id="region">
                        <option>海淀区</option>
                        <option>东城区</option>
                        <option>越秀区</option>
                        <option>海珠区</option>
                        <option>福田区</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <label for="validate"><span class="right"><i>*</i> 手机验证码：</span></label>
                <input class="txt" type="text" id="validate" name="validate" pattern="\d{4}">
            </div>
            <div class="row">
                <span class="right">&nbsp;</span>
                <input type="submit" class="btnC" value>
            </div>
        </form>
        <div style="clear:both">
        </div>
    </div>
</body>

</html>